<template>
  <van-popup
    v-model="drawer"
    round
    position="bottom"
    :style="{ height: '60%' }"
    close-icon="close"
    closeable
  >
    <h4 style="text-align: center">搜索</h4>
    <div ref="searchFrom">
      <van-form @submit="query">
        <searchable-picker
          v-model="queryParams.orderId"
          :columns="searchOrder"
          valueKey="orderId"
          labelKey="orderName"
          label="商机"
          placeholder="选择商机"
        />
        <searchable-picker
          v-model="queryParams.customerId"
          :columns="customerList"
          valueKey="customerId"
          labelKey="customerName"
          label="客户"
          placeholder="选择商机"
        />
        <van-field
          v-model="queryParams.createBy"
          label="负责人"
          placeholder="请输入负责人"
        />
        <searchable-picker
          v-model="queryParams.devUserId"
          :multiSelect="true"
          :columns="expertList"
          labelKey="expertName"
          valueKey="expertId"
          label="研发人员"
          placeholder="选择研发人员"
        />
        <searchable-picker
          v-model="queryParams.opsUserId"
          :multiSelect="true"
          :columns="expertList"
          labelKey="expertName"
          valueKey="expertId"
          label="实施人员"
          placeholder="选择实施人员"
        />
        <div class="mobile-footer">
         
          <van-button
            @click="reset"
            style="width: 45%; border-radius: 10px"
            >重置</van-button
          >
          <van-button
              type="info"
              native-type="submit"
              style="width: 45%; border-radius: 10px"
              >搜索</van-button
            >
        </div>
      </van-form>
    </div>
  </van-popup>
</template>

<script>
import { getExpertList } from "@/api/crm/expert";

import { getCustomerList } from "@/api/crm/customer";

import { getOrderListAll } from "@/api/crm/order";
export default {
  name: "searchDialog",
  dicts: ["crm_expert_type"],
  data() {
    return {
      searchOrder: [],
      customerList: [],
      expertList: [],
      drawer: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        userId: null,
        opsUserId: null,
        devUserId: null,
      },
    };
  },
  created() {},
  methods: {
    getOrderList() {
      getOrderListAll({}).then((res) => {
        this.searchOrder = res.data;
      });
    },
    getExpertList() {
      getExpertList().then((res) => {
        this.expertList = res.data;
      });
    },
    getCustomerList() {
      getCustomerList().then((res) => {
        this.customerList = res.data;
      });
    },
    open() {
      this.drawer = true;
      this.getCustomerList();
      this.getExpertList();
      this.getOrderList();
    },

    query() {
      this.$emit("getList", this.queryParams);
      this.drawer = false;
    },
    reset() {
      this.queryParams = {
        year: this.year,
        deptId: null,
        quarter: null,
        month: null,
        week: null,
      };
      this.query();
    },
  },
};
</script>

<style scoped>
::v-deep .el-select-dropdown {
  width: 50% !important;
  /* max-width: 200px !important;
  left: 157px !important; */
}
</style>